<template>
	<view class="ucenter">
		<view class="userInfo">
			<image class="logo-img" v-if="isLogin" :src="user.avatar"></image>
			<image v-else class="logo-img" src="@/static/uni-center/grey.png"></image>
			<view class="logo-title">
				<view class="uer-name" v-if="isLogin">{{user.nickname}}&nbsp;&nbsp;(角色：{{userInfoTrans}})
				<view class="logout-btn">
					<button type="default" size="mini" @click="logout">退出</button>
				</view>
				</view>
				<view class="wx-login" v-else>
					<button class="uploader-text" open-type="getUserInfo"  @getuserinfo="onGetUserInfo">登录</button>
				</view>
			</view>
		<view>
			<!-- 开始投票确认框 -->
			<uni-popup ref="logoutDialog" type="dialog">
				<uni-popup-dialog type="warn" content="登出账户后无法加入游戏,请确认是否退出" title="退出登录确认" @confirm="subLogout">
				</uni-popup-dialog>
			</uni-popup>
		</view>
<!-- 			<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
				<uni-list-item v-for="(item,i) in sublist" :title="item.title" link :rightText="item.rightText" :key="i"
					:clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
					:extraIcon="{type:item.icon,color:'#999'}">
					<template v-slot:footer>
						<view v-if="item.showBadge" class="item-footer">
							<text class="item-footer-text">{{item.rightText}}</text>
							<view class="item-footer-badge"></view>
						</view>
					</template>
				</uni-list-item>
			</uni-list> -->
		</view>
	<view class="author-info">
		<text>工具开发人员：伍一阳、王辉、陈扬扬 \n 
		V1.1.0 Beta 版本更新说明：\n 
		1、微信授权登录注册用户信息\n 
		2、游戏座位主界面、数据实时刷新 \n 
		3、主持人创建游戏、回合投票控制、行为录入  \n 
		4、玩家加入游戏、选座投票、复盘分数统计\n 
		欢迎大家体验使用\n 
		遇到问题或有优化建议与我们反馈~</text>
	</view>			
	</view>
</template>

<script>
	import { UID_KEY,GAME_ID } from '@/common/utils'
	import {submitregister,queryuserinfo} from "@/common/api"
	import {mapState,mapMutations,mapGetters,mapActions} from "@/store/helper/dm"
	export default {
		data() {
			return {
				wxinfo:{},
				ucenterList: [
					[
						{
							"title":"游戏规则",
							"event": 'signInByAd',
							"icon": "compose"
						},
						{
							"title": "我的积分",
							"event": 'gotoMarket',
							"icon": "hand-thumbsup"
						},
						{
							"title": "我的战绩",
							"to": '/pages/ucenter/read-news-log/read-news-log',
							"icon": "flag"
						},
						{
							"title": "关于",
							"to": '',
							"event": 'getScore',
							"icon": "paperplane"
						}
						, {
							"title": "功能更新说明",
							"event": 'share',
							"icon": "redo"
						}
					]
				],
				listStyles: {
					"height": "150rpx", // 边框高度
					"width": "150rpx", // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "100%" // 边框圆角，支持百分比
					}
				},
			}
		},
		onLoad() {},
		computed: {
			...mapState([
				"user",
				"isLogin",
				"gameStatus"
			]),
			...mapGetters([
				"userInfoTrans"
			]),
		},
		methods: {
			//uniapp云空间微信授权方案  暂时弃用
			// getWeixinCode() {
			//   return new Promise((resolve, reject) => {
			// 	// #ifdef MP-WEIXIN
			// 	uni.login({
			// 	  provider: 'weixin',
			// 	  success(res) {
			// 		resolve(res.code)
			// 	  },
			// 	  fail(err) {
			// 		reject(new Error('微信登录失败'))
			// 	  }
			// 	})
			// 	// #endif
			// 	// #ifdef APP-PLUS
			// 	weixinAuthService.authorize(function(res) {
			// 	  resolve(res.code)
			// 	}, function(err) {
			// 	  console.log(err)
			// 	  reject(new Error('微信登录失败'))
			// 	});
			// 	// #endif
			//   })
			// },
			// loginByWeixin() {
			//   this.getWeixinCode().then((code) => {
			// 	return uniCloud.callFunction({
			// 	  name: 'login-by-weixin',
			// 	  data: {
			// 		code
			// 	  }
			// 	})
			//   }).then((res) => {
			// 	uni.showModal({
			// 	  showCancel: false,
			// 	  content: JSON.stringify(res.result)
			// 	})
			// 	if (res.result.code === 0) {
			// 	  uni.setStorageSync('uni_id_token', res.result.token)
			// 	  uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
			// 	}
			//   }).catch(() => {
			// 	uni.showModal({
			// 	  showCancel: false,
			// 	  content: '微信登录失败，请稍后再试'
			// 	})
			//   })
			// },
			//登录功能分为3个步骤 1、授权获取微信用户信息 2、提交注册用户 3、查询用户身份类型
			//多个异步任务需封装
			onGetUserInfo(e) {
			    console.log(e)
				//云调用授权获取用户信息
			    wx.cloud.callFunction({
			      name: 'openapi',
			      data: {
			        action: 'getOpenData',
			        openData: {
			          list: [
			            e.detail.cloudID,
			          ]
			        }
			      }
			    }).then(res => {
			    console.log('[onGetUserInfo] 调用成功：', res)
				//接收处理用户信息参数
				let userinfo = {
					avatar: res.result.list[0].data.avatarUrl,
					nickname:res.result.list[0].data.nickName,
					openId:res.result.list[0].data.openId,
					}	
				this.login(userinfo)
			  },)
			  },				  
			async login(e){
				this.wxinfo =e
				const {data} =await submitregister(JSON.stringify(e))
				//新用户首次提交则创建成功
				if(data.code==="200"){
					this.wxinfo.id= data.data.id
					this.wxinfo.type=data.data.type
					uni.setStorageSync('UID_KEY',this.wxinfo)
					this.setLoginStatus(true)
					this.setUser(this.wxinfo)	
				}
				//老用户提交需再次调接口查询用户id和权限
				else if(data.code==="700"){
					this.queryUserType(this.wxinfo)
				}else{	
					console.log(data.message)
				}
			},  
			async queryUserType(){
				const {data} = await queryuserinfo({"openId": this.wxinfo.openId})
				if(data.code==="200"){
					this.wxinfo.id= data.data.id
					this.wxinfo.type= data.data.type
					//测试管理员身份
					// this.wxinfo.type="dm"
					uni.setStorageSync('UID_KEY',this.wxinfo)
					this.setLoginStatus(true)
					this.setUser(this.wxinfo)
					//缓存游戏编号，如为主持人则可在创建游戏环节重新覆盖
					// uni.setStorageSync('GAME_ID',this.currentGameID)
					console.log(this.user)
				} else{
					console.log(data.message)
				}
			},
			logout(){
				this.$refs.logoutDialog.open()
			},
			subLogout(){
				this.logOut()
			},
			...mapMutations([
				"setLoginStatus",
				"setUser"
			]),
			...mapActions([
				"logOut"
			]),
		}
	}
</script>

<style lang="scss" scoped>
	.ucenter {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 40rpx;
		height: 1500rpx;
		color: $uni-color-title;
		background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url(https://s3.bmp.ovh/imgs/2022/03/4f3d1eb5cee85af3.jpg) scroll 0 0;
		background-size: cover;
	}


	.userInfo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		margin-top: 40px;
		background-color: rgba($color: #ffffff, $alpha: 0);
		// border-radius: 15rpx;
	}

	.logo-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		border:3px solid #133F74 ;
	}

	.logo-title {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		flex: 1;
	}

	.uer-name {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: 700;
		.logout-btn{
			margin:20rpx ;
		}
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.wx-login{
		height: 50rpx;
		width: 300rpx;
		margin-left: 20rpx;
		background: url(https://s3.bmp.ovh/imgs/2022/03/8713102b47f53b34.png) no-repeat;
		background-size:contain ;
	}
	.author-info{
		margin-top: 54.34rpx;
	}
</style>
